<template>
  <div class="benford-container">
    <div class="tree-box">
      <el-tree
        ref="tree"
        :data="columnData"
        :props="defaultProps"
        :check-strictly="true"
        show-checkbox
        @node-expand="handleNodeExpand"
        @node-collapse="handleNodeCollapse"
      >
        <!-- eslint-disable-next-line -->
        <span slot-scope="{ node, data }" class="custom-tree-node">
          <span>
            <i
              v-if="data.children && data.children.length>0"
              :class="(!data.icon || data.icon === 'el-icon-folder') ? 'el-icon-folder' : 'el-icon-folder-opened'"
              style="padding-right:5px;"
            />
            <i v-else />{{ node.label }} {{ node.icon }}
          </span>
        </span>
      </el-tree>
    </div>
    <div class="opertions">
      <div class="input-box">
        <el-button
          type="primary"
          class="btn"
          circle
          icon="el-icon-thumb"
          @click="getSelectNode"
        />
      </div>
    </div>
    <div class="echarts">
      <div class="top">
        <div ref="benfordChart" class="benford-chart" />
      </div>
      <div class="bottom">
        <div ref="diffChart" class="diff-chart" />
      </div>
    </div>
    <div class="terminfo-list">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>课程期数</span>
        </div>
        <div v-for="key in Object.keys(planStageData)" :key="key" class="terminfo-item" :class="{active: +key === +curKey}" @click="clickTerminfo(key)">
          <span class="title">{{ terminfoMap[key-1] }}</span>
          <span class="count">{{ planStageData[key].length }}</span>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { terminfoMap } from '@/utils/dictionary'
export default {
  data() {
    return {
      terminfoMap,
      columnData: [],
      num: '',
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      benfordOptions: {
        xAxis: {
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
        },
        yAxis: {},
        tooltip: {},
        legend: {
          data: ['本福特定律', '课程']
        },
        series: [{
          name: '本福特定律',
          type: 'line',
          data: [0.301, 0.176, 0.125, 0.097, 0.079, 0.067, 0.058, 0.051, 0.046]
        }, {
          name: '课程',
          type: 'line',
          data: []
        }]
      },
      benfordChart: null,
      diffChart: null,
      diffOptions: {
        xAxis: {
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
        },
        yAxis: {},
        tooltip: {},
        legend: {
          data: ['差值']
        },
        series: [{
          name: '差值',
          type: 'line',
          data: []
        }]
      },
      planStageData: {},
      curKey: 1
    }
  },
  created() {
    this.getColumnTree()
  },
  mounted() {
    this.initBenfordChart()
    this.initDiffChart()
  },
  methods: {
    // 获取侧边栏
    async getColumnTree() {
      const res = await this.$api.getColumnTree()
      if (res && res.code === 200) {
        this.columnData = this.recursionChangeTree(res.data.records)
      }
    },
    // 递归改变树状结构
    recursionChangeTree(tree) {
      if (Array.isArray(tree) && tree.length > 0) {
        return tree.map(item => {
          this.customId
          this.$set(item, 'title', item.channelName || item.categoryName)
          if (item.children && Array.isArray(item.children)) {
            this.recursionChangeTree(item.children)
          }
          return item
        })
      } else {
        return []
      }
    },
    async getSelectNode() {
      const nodes = this.$refs.tree.getCheckedNodes()
      if (nodes.length > 0) {
        const ids = nodes.map(item => item.categoryId)
        const res = await this.$api.getPlanStageData(ids.join(','))
        if (res && res.code === 200) {
          this.planStageData = res.data.stageObj
          this.getFirstPrecent(1)
        }
      } else {
        this.$message.error('请勾选课程类别')
      }
    },
    // 首位数图表数据转化
    getFirstPrecent(num) {
      const data = this.planStageData[num]
      const len = data.length
      const charObj = {}
      data.forEach(item => {
        const firstChar = (item.enrollCount + '')[0]
        if (firstChar > 0) {
          if (charObj[firstChar]) {
            charObj[firstChar]++
          } else {
            charObj[firstChar] = 1
          }
        }
      })
      const charArr = new Array(9).fill(0)
      Object.keys(charObj).forEach(key => {
        charArr[key - 1] = charObj[key] / len
      })
      this.benfordOptions.series[1].data = charArr
      this.benfordChart.setOption(this.benfordOptions, {
        lazyUpdate: true
      })
      // 求差值
      const diffArr = new Array(9)
      const series = this.benfordOptions.series
      series[0].data.forEach((item, index) => {
        diffArr[index] = charArr[index] - item
      })
      this.diffOptions.series[0].data = diffArr
      this.diffChart.setOption(this.diffOptions, {
        lazyUpdate: true
      })
    },
    clickTerminfo(key) {
      this.curKey = key
      this.getFirstPrecent(key)
    },
    handleNodeExpand(node, data) {
      if (!node.icon) {
        this.$set(node, 'icon', 'el-icon-folder-opened')
      } else {
        node.icon = 'el-icon-folder-opened'
      }
    },
    handleNodeCollapse(node, data) {
      node.icon = 'el-icon-folder'
    },
    initBenfordChart() {
      const benfordChart = this.$echarts.init(this.$refs.benfordChart)
      this.benfordChart = benfordChart
      benfordChart.setOption(this.benfordOptions)
      window.addEventListener('resize', () => {
        benfordChart.resize()
      })
    },
    initDiffChart() {
      const diffChart = this.$echarts.init(this.$refs.diffChart)
      this.diffChart = diffChart
      diffChart.setOption(this.diffOptions)
      window.addEventListener('resize', () => {
        diffChart.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/mixin.scss";
.benford-container{
  display: flex;
}
.tree-box{
  flex-basis: 240px;
  width: 240px;
  height: calc(100vh - 50px);
  overflow: auto;
  @include borderShadow(0);
  @include scrollBar;
}

.opertions{
  position: relative;
  flex-basis: 200px;
  width: 200px;
  @include borderShadow(0, 4px);
}
.input-box{
  text-align: center;
  @include boxCenter;
}
.num{
  position: absolute;
  top: 35%;
}
.btn{
  font-size: 40px;
  width: 80px;
  height: 80px;
}
.echarts{
  flex: 1;
  @include borderShadow(0);
  .top{
    height: calc(50vh - 25px);
    border-bottom: 1px solid #e7e7e7;
  }
  .bottom{
    height: calc(50vh - 25px);
  }
}
.terminfo-list{
  flex-basis: 300px;
  width: 300px;
  height: calc(100vh - 50px);
  overflow: auto;
  @include scrollBar;
  @include borderShadow(0);
  .terminfo-item{
    display: flex;
    justify-content: space-between;
    padding: 10px;
    &:hover{
      background: #F5F7FA;
      cursor: pointer;
    }
    &.active{
      background: #F5F7FA;
    }
  }
}
.benford-chart, .diff-chart{
  width: 100%;
  height: 260px;
}
::v-deep .el-tree-node {
  .is-leaf + .el-checkbox .el-checkbox__inner {
      display:inline-block;
  }
  .el-checkbox__input> .el-checkbox__inner {
      display:none;
  }
}
::v-deep .el-input__inner{
  height: 30px;
}
::v-deep .el-tree-node__expand-icon{
  position: absolute;
  right: 2%;
}
</style>
